<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		*{
			margin:0;
			padding:0;
			list-style:none;
			}
		.wrap{
			height:170px;
			width:350px;
			margin:60px auto;
			overflow: hidden;
			position: relative;
			margin:100px auto;
			}
		.wrap ul{
			position:absolute;
			} 
		.wrap ul li{
			height:170px;
			}
		.wrap ol{
			position:absolute;
			right: 10px;
			bottom:10px;
			}
		.wrap ol li{
			height:20px; width: 20px;
			background:#ccc;
			border:solid 1px #666;
			margin-left:5px;
			color:#000;
			float:left;
			border-radius: 50%;
			line-height:center;
			text-align:center;
			cursor:pointer;
			}
		.wrap ol .on{
			background:#E97305;
			color:#fff;
			}
		
		</style>
		
		<script type="text/javascript">
			window.onload=function(){
			var wrap=document.getElementById('wrap'),
			pic=document.getElementById('pic').getElementsByTagName("li"),
			list=document.getElementById('list').getElementsByTagName('li'),
			index=0,
			timer=null;
		
			// 定义并调用自动播放函数
			timer = setInterval(autoPlay, 2000);
			
			// 鼠标划过整个容器时停止自动播放
			wrap.onmouseover = function () {
			clearInterval(timer);
			}
			
			// 鼠标离开整个容器时继续播放至下一张
			wrap.onmouseout = function () {
			timer = setInterval(autoPlay, 2000);
			}
			// 遍历所有数字导航实现划过切换至对应的图片
			for (var i = 0; i < list.length; i++) {
			list[i].onmouseover = function () {
			clearInterval(timer);
			index = this.innerText - 1;
			changePic(index);
			};
			};
			
			function autoPlay () {
			if (++index >= pic.length) index = 0;
			changePic(index);
			}
			
			// 定义图片切换函数
			function changePic (curIndex) {
			for (var i = 0; i < pic.length; ++i) {
			pic[i].style.display = "none";
			list[i].className = "";
			}
			pic[curIndex].style.display = "block";
			list[curIndex].className = "on";
			}
			
			};
		
		</script> 
		
	</head>
	<body>
		<div id="wrap" class="wrap">
			<ul id="pic">
				<li><img src="images/01.jpg" ></li>
				<li><img src="images/02.jpg" ></li>
				<li><img src="images/03.jpg" ></li>
			</ul>
			<ol id="list">
				<li class="on">1</li>
				<li>2</li>
				<li>3</li>
			</ol>
		</div>
	</body>
</html>
